<script setup>
import { ref } from 'vue'
import { getFeedBackListService, removeFeedBackService } from '@/api/feedBack.js'
import { formatTime } from '@/utils/format'
import FeedBackInfo from './components/FeedBackInfo.vue'
const loading = ref(false)
const feedBackList = ref([])
const getFeedBackList = async () => {
  loading.value = true
  const res = await getFeedBackListService()
  feedBackList.value = res.data
  loading.value = false
}
const infoRef = ref()
const getInfo = (userName, content) => {
  infoRef.value.open(userName, content)
}
const onClick = async (id) => {
  await removeFeedBackService(id)
  ElNotification({
    title: '提示',
    message: '您已处理此反馈信息',
    duration: 2000
  })
  getFeedBackList()
}
getFeedBackList()
</script>

<template>
  <page-container title="用户反馈">
    <el-table :data="feedBackList" style="width: 100%" height="480px" v-loading="loading">
      <el-table-column label="提交日期" width="105" align="center">
        <template #default="{ row }">
          {{ formatTime(row.createDateTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="account" align="center" label="用户账号" width="150"></el-table-column>
      <el-table-column align="center" label="用户权限" width="80">
        <template #default="{ row }">
          {{ row.roleId === 1 ? '管理员' : row.roleId === 2 ? '普通用户' : '专家' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="反馈描述">
        <template #default="{ row }">
          <div class="description-cell">{{ row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160">
        <template #default="{ row }">
          <div class="button-wrapper">
            <el-button size="medium" type="primary" @click="getInfo(row.userName, row.content)"
              >详情</el-button
            >
            <el-button size="medium" type="success" @click="onClick(row.id)">确认</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <feed-back-info ref="infoRef"></feed-back-info>
  </page-container>
</template>

<style>
.description-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text {
  font-size: 17px;
  font-weight: 500;
}
</style>
